<template>
  <!-- 详情 -->
  <el-dialog
    :visible.sync="dialogVisible"
		title="出口运抵申报管理详情"
    width="50%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="closedialog"
		class="self-dialog"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-descriptions
          :column="2"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 批次号 </template>
            {{ form.manifestId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 运输模式 </template>
            {{ form.transportMode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进出口类型 </template>
            {{ form.iEFlag }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 状态 </template>
            {{ form.status }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申报回执消息 </template>
            {{ form.declRemark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 运抵时间 </template>
            {{ form.arrivarTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进出境海关代码 </template>
            {{ form.ieCustomsCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 卸载地代码 </template>
            {{ form.unloadCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            {{ form.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建人 </template>
            {{ form.createBy }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 创建时间 </template>
            {{ form.createTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 更新时间 </template>
            {{ form.updateTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 更新人 </template>
            {{ form.updateBy }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 变更原因描述 </template>
            {{ form.reason }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 变更人 </template>
            {{ form.contact }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="提运单信息" name="second">
        <!-- 提运单list -->
        <bill-list :arrivarWaybills="form.billsList" type="detail"></bill-list>
      </el-tab-pane>
      <el-tab-pane label="集装箱信息" name="third">
        <container-list :arrivarContainers="form.contaList" type="detail"></container-list>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="closedialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getArrivar } from "@/api/swdecl/swArriveHead";
import billList from "./billList.vue";
import ContainerList from "./containerList.vue";
export default {
	components: { billList, ContainerList },
  props: {
    detailId: {},
    dict: {},
  },
  data() {
    return {
      //显示详情
      dialogVisible: false,
      activeName: "first",
      form: {
        id: null,
        manifestId: null,
        transportMode: null,
        iEFlag: null,
        status: "0",
        declRemark: null,
        arrivarTime: null,
        ieCustomsCode: null,
        unloadCode: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateTime: null,
        updateBy: null,
        reason: null,
        contact: null,
        msgUrl: null,
      },
    };
  },
  watch: {
    detailId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.loadDetail();
        }
      },
    },
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    closedialog() {
      this.activeName = "first";
      this.dialogVisible = false;
    },
    // 获取详情
    loadDetail() {
      getArrivar(this.detailId).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
  },
};
</script>

<style>
</style>
